<!--
 * @Description: 右侧第二个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: [kangjie]
 * @LastEditTime: 2022-09-07 15:12:35
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
import { Liquid, measureTextWidth } from '@antv/g2plot';
export default {
  data() {
    return {

    };
  },
  computed: {},
  methods: {
    //加载仪表盘
    loadChart() {
      const liquidPlot = new Liquid(this.$refs['container'], {
        percent: 0,
        radius: 0.8,
        statistic: {
          title: {
            formatter: () => 'scales',
            style: ({ percent }) => ({
              fill: percent > 0.65 ? 'rgba(44,53,66,0.85)' : 'white',
            }),
          },
          content: {
            style: ({ percent }) => ({
              fontSize: 60,
              lineHeight: 1,
              fill: percent > 0.65 ? 'rgba(44,53,66,0.85)' : 'white',
            }),
            customHtml: (container, view, { percent }) => {
              const { width, height } = container.getBoundingClientRect();
              const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
              const text = `${(percent * 100).toFixed(0)}%`;
              const textWidth = measureTextWidth(text, { fontSize: 60 });
              const scale = Math.min(d / textWidth, 1);
              return `<div style="width:${d}px;display:flex;align-items:center;justify-content:center;font-size:.7em;line-height:${scale <= 1 ? 1 : 'inherit'
                }">${text}</div>`;
            },
          },
        },
        liquidStyle: ({ percent }) => {
          return {
            fill: percent > 0.45 ? '#5B8FF9' : '#FAAD14',
            stroke: percent > 0.45 ? '#5B8FF9' : '#FAAD14',
          };
        },
        color: () => '#5B8FF9',
      });
      liquidPlot.render();

      let data = 0;
      const interval = setInterval(() => {
        data += Math.min(Math.random() * 0.1, 0.1);
        if (data < 0.75) {
          liquidPlot.changeData(data);
        } else {
          data = 0.75;
          liquidPlot.changeData(data);
          clearInterval(interval);
        }
      }, 500);
    }
  },
  created() { },
  mounted() {
    this.loadChart();
  },
};
</script>
<style scoped>

</style>